<html>
  <head>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      .container {
        box-sizing: border-box;
        /* 确保中间内容可以显示出来，例如：两倍left宽+一倍right宽 */
        /* min-width: 600px; */
        /* 为左右栏腾出空间 */
        padding-left: 200px;
        padding-right: 200px;
      }
      .center {
        float: left;
        /* 然后设置center的宽度为100%，宽度填充满父容器container，实现中间列内容自适应 */
        /* center区域的最小宽度不能小于left区域的宽度，否则left区域和right区域会掉到下一行 */
        width: 100%;
        height: 500px;
        background: #de5e60;
      }
      .left {
        float: left;
        width: 200px;
        height: 200px;
        /* 设置margin-left为负值让left区域回到与center区域同一行，百分比相对于最近的块级或内联块父元素width（非总宽度，不包括padding border margin）的相应百分比的值 */
        margin-left: -100%;
        /* 通过设置相对定位，让left区域移动到左侧 */
        position: relative;
        /* left: -200px; */
        background: #222;
      }
      .right {
        float: left;
        width: 300px;
        height: 300px;
        /* 设置margin-left为负值让right区域回到与center区域同一行 */
        margin-left: -300px;
        /* 通过设置相对定位，让right区域移动到右侧 */
        position: relative;
        /* right: -200px; */
        background: #555;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="center">圣杯布局</div>
      <div class="left"></div>
      <div class="right"></div>
    </div>
    <script></script>
  </body>
</html>
